<script setup lang="ts">
import FixedAction from '@/components/FixedAction.vue'
import useRouteReplace from '@/hooks/useRouteReplace'
import { NButton } from 'naive-ui'
import { useRoute } from 'vue-router'

// *
import useSubmit from '@/components/DynamicFormComponent/useSubmit'
import DynamicFormComponent from '@/components/DynamicFormComponent/index.vue'

const { dfInst, formData, createVars, submitLoading, submit } = useSubmit(async () => {
  // 提交逻辑
  // const [error, res] = await sendRequest()
  console.log(formData.value)
})
// *

const route = useRoute()
const routeReplace = useRouteReplace(route.query.redirect as string)
</script>

<template>
  <div class="dynamic-form-demo">
    <!-- * -->
    <DynamicFormComponent
      ref="dfInst"
      :data="formData"
      :createVars="createVars"
    />
  </div>

  <FixedAction class="dynamic-form__actions">
    <div class="dynamic-form__controls">
      <NButton
        color="#999999"
        ghost
        :disabled="submitLoading"
        @click="routeReplace"
        style="width: 78px; height: 34px"
      >
        取消
      </NButton>

      <NButton
        color="#5FB17F"
        :disabled="submitLoading"
        :loading="submitLoading"
        @click="submit"
        style="width: 78px; height: 34px"
      >
        保存
      </NButton>
    </div>
  </FixedAction>
</template>

<style scoped>
.dynamic-form-demo {
  padding: 30px 45px 100px;
}

.dynamic-form__actions {
  left: 0 !important;
}

.dynamic-form__controls {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 16rem;
}

.dynamic-form__controls .n-button {
  width: 100rem;
  height: 50rem;
}
</style>
